<template>
	<view class="fixedNav">
		<view :class="modal == true ? 'fixedTop' : ''">
			<!-- <u-tabs ref="tabs" :show-bar="false" :is-scroll="true" :gutter="gutter" @change="tabsChange" :list="list"
				:current="current"></u-tabs> -->
			<scroll-view scroll-x="true" class="bookshelf-content">
				<view class="scroll">
					<view class="tabsText" :class="tabsIndex == index ? 'fontColor': ''" v-for="(item,index) in list"
						:key="index" @click="tabsChange(item,index)">
						<!-- {{item.name}} -->
						{{item.name.length > 5 ? item.name.substring(0, 5) + "..." : item.name}}
					</view>
				</view>
			</scroll-view>
		</view>

		<view :class="modal == true ? 'listHeight' : ''" >
			<scroll-view class="screenHeight" scroll-y="true" :scroll-top="scrollTop" @scroll="scroll">
				<view class="list-cell" v-for="(i,index) in city" :key="index" @click="onClick(i,index)">
					{{valueName ? i[valueName] : i['name']}}
					<u-icon name="checkmark" color="#2979ff" v-if="i.sign"></u-icon>
				</view>
			</scroll-view>
		</view>

	</view>
</template>

<script>
	export default {
		/*	
			grade通过父组件传递进来的值控制tabs标签最多显示多少
			modal通过父组件传递进来的值控制是否是弹窗引用
			gutter通过父组件传递进来的值控制tabs标签的单个tab标签的左右内边距之和 默认是40
			change事件   list列表点击触发事件
			tabsChange事件  tabs标签触发事件
			可以引用该组件时的标签上使用ref来触发该组件中定义的方法、事件
			value-name 自定义list数据的value属性名
		*/
		props: {
			valueName: {
				type: [String],
				default: ''
			},
			grade: {
				type: [String, Number],
				default: ''
			},
			modal: {
				type: [Boolean],
				default: ''
			},
			gutter: {
				type: [String, Number],
				default: ''
			}
		},
		data() {
			return {
				// modal1:this.modal,
				list: [{
					name: '请选择',
					code: null
				}],
				current: 0,
				city: [],
				name: '',
				tabsIndex: 0,
				scrollTop: 0
				// valueName: this.valueName ? this.valueName 
			}
		},
		
		methods: {
			// 竖向滚动触发事件
			scroll(e) {
				this.scrollTop = e.detail.scrollTop
			},
			// 选择点击触发  每点一次list列表数据都将会传递给父组件的change事件
			onClick(obj, index) {
				// 每选择一次将会切换tabs 点击之前滚动过，切换tabs之后city列表数据显示需显示第一个
				this.scrollTop = 0
				let arr = {
					name: '请选择'
				}
				// 上一级选择之后tabs标签需要显示选择的名称
				this.list[this.current] = {
					...obj
				}
				this.tabsIndex = this.current + 1
				// 标识选中的内容(单选)
				this.city = this.city.map((item, i) => {
					item.sign = index == i ? true : false
					return item
				})
				let str
				/* 目前发现的城市有广东省的中山市和东莞市三级数据为空白，需要请求四级数据
				   所以这两个城市哪怕选择时省市区镇四级选择也要变成三级选择
				*/
				let i = this.current == 0 ? this.current : this.current - 1
				if (this.list[i].code == 442000000000 || this.list[i].code == 441900000000) {
					str = this.grade - 2
				} else {
					str = this.grade - 1
				}
				/*
					首次选择每一级数据，tabs标签list数据将增加一级，list最长为grade
					通过切换重新选择某一级的数据将是改变tabs标签当前选择的list数据
				*/
				let data = {
					current: obj
				}
				if (this.current == str) {
					this.tabsIndex = this.tabsIndex - 1
					data.list = this.list
					this.$forceUpdate() //需要强制更新一下，否则list数据改变了，视图没有改变
				} else if (this.list.length != (this.current + 1)) {
					// tab标签切换之后进行修改时，之前的list数据将重新进行展示
					this.list.splice(this.current + 1, this.list.length)
					this.list.push(arr)
					this.current = this.current + 1
					// this.address(this.current + 1, obj.code)
				} else if (this.current < this.grade && this.list.length != this.grade) {
					this.current = this.current + 1
					this.list.push(arr)
					// 对list进行数据去重
					this.list = this.list.filter((element, index, self) => {
						return self.findIndex(x => x.name === element.name) === index
					})
					// this.address(this.current + 1, obj.code)
				} else {
					// let level = this.current + 1
					this.current = this.current + 1
					// this.address(level + 1, obj.code)
				}
				data.index = this.current
				this.$emit('change', data)
			},
			// tabs切换触发  每切换一次都会传递给父组件的tabsChange事件
			tabsChange(obj, index) {
				// 切换tabs 切换之前滚动过，切换之后city列表数据显示需显示第一个
				this.scrollTop = 0
				if(index == this.tabsIndex) return
				this.current = index
				this.tabsIndex = this.current
				let data = {
					list: this.list[this.current],
					current: obj,
					index
				}
				if (obj.name == '请选择') {
					data.list = this.list[this.current - 1]
				}
				this.$emit('tabsChange', data)
			},
		},
	}
</script>

<style>
	/* 如果不是以弹窗的形式显示的话，单独整体页面使用此组件的话，就要fixedTop和listHeight注释掉 */
	.fixedTop {
		position: fixed;
		top: 83rpx;
		width: 100%;
		border-bottom: 1rpx solid #DCDFE6;
		z-index: 1;
	}

	.bookshelf-content {
		white-space: nowrap;
		/* 滚动必须加的属性 */
		width: 100%;
		padding: 20rpx;
		margin: 0 auto;
		background-color: #FFFFFF;
	}

	.scroll {
		white-space: nowrap;
		display: flex;
	}

	.tabsText {
		margin-left: 10rpx;
		margin-right: 20rpx;
	}
	.fontColor {
		color: #007AFF;
	}

	.listHeight {
		padding-top: 172rpx;
	}
	.screenHeight {
		height: 500rpx;
	}
	.list-cell {
		/* height: 100%; */
		display: flex;
		justify-content: space-between;
		padding: 15rpx 0;
		padding-left: 40rpx;
		padding-right: 40rpx;
		border-bottom: 1rpx solid #DCDFE6;
	}
</style>
